<template>
  <a-modal
    :maskClosable="false"
    :title="title"
    :width="1350"
    :bodyStyle="{
      padding: '0 24px'
    }"
    :visible="visible"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-card
      :bordered="false"
      :bodyStyle="{
        padding: '10px 24px'
      }">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchByquerys">
              <a-row :gutter="24">
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="单据编号">
                    <j-input placeholder="请输入单据编号" v-model="queryParams.billNo"></j-input>
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item
                    label="申请公司"
                    :labelCol="{
                      xs: { span: 24 },
                      sm: { span: 5 },
                    }"
                    :wrapperCol="{
                      xs: { span: 24 },
                      sm: { span: 12 },
                    }">
                    <select-Company-input v-model="queryParams.applicant" />
                  </a-form-item>
                </a-col>
                <template v-if="toggleSearchStatuss">
                  <a-col :xl="6" :lg="7" :md="8" :sm="24">
                    <a-form-item label="报销金额">
                      <a-input-number placeholder="请输入最小值" class="query-group-cust" :precision="2" v-model="queryParams.reimbursementAmount_begin" style="width:calc(50% - 15px);"></a-input-number>
                      <span class="query-group-split-cust"></span>
                      <a-input-number
                        placeholder="请输入最大值"
                        class="query-group-cust"
                        :precision="2"
                        :min="queryParams.reimbursementAmount_begin"
                        v-model="queryParams.reimbursementAmount_end"
                        style="width:calc(50% - 15px);"></a-input-number>
                    </a-form-item>
                  </a-col>
                  <a-col :xl="6" :lg="7" :md="8" :sm="24">
                    <a-form-item label="是否付款">
                      <j-dict-select-tag placeholder="请选择是否付款" v-model="queryParams.isPayFlag" dictCode="is_pay_flag"/>
                    </a-form-item>
                  </a-col>
                </template>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchByquerys" icon="search">查询</a-button>
                    <a-button @click="searchResets(1)" icon="redo" style="margin-left: 8px">重置</a-button>
                    <a @click="handleToggleSearchs" style="margin-left: 8px">
                      {{ toggleSearchStatuss ? '收起' : '展开' }}
                      <a-icon :type="toggleSearchStatuss ? 'up' : 'down'"/>
                    </a>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <!-- 查询区域-END -->

          <!-- table区域-begin -->
          <div>
            <a-table
              ref="tables"
              :scroll="{x:scrollX}"
              bordered
              rowKey="id"
              :components="draggableComponent"
              :columns="dragResizeColumns"
              :dataSource="dataSources"
              :pagination="ipaginations"
              :loading="loadings"
              @change="handleTableChanges"
              class="j-table-force-nowrap"
              wrapClassName="ant-modal-cust-warp">
              <span slot="action" slot-scope="text, record">
                <a @click="onDetails(record)">详情</a>
              </span>
              <span slot="money" slot-scope="text, record">
                {{ record.reimbursementAmount.toFixed(2) }}/
                <a @click="getPaymentAmount(record)">{{ record.totalPayAmount.toFixed(2) }}</a>
                /
                <a @click="getChargedAmount(record)">{{ record.chargedAmount.toFixed(2) }}</a>
              </span>
            </a-table>
          </div>

          <!-- 详情开始 -->
          <a-modal
            :maskClosable="false"
            title="费用报销单单据详情"
            :width="1350"
            :bodyStyle="{
              padding: '0 24px'
            }"
            :visible="visibleDetails"
            @cancel="handleCancelDetails"
            cancelText="关闭">
            <erp-finance-reimbursement-bill-form ref="realForms" :disabled="true" normal></erp-finance-reimbursement-bill-form>
            <template slot="footer">
              <a-button @click.stop="handleCancelDetails">关闭</a-button>
            </template>
          </a-modal>
          <!-- 详情结束 -->
    </a-card>
    <template slot="footer">
      <a-button @click.stop="()=>{visible=false}">关闭</a-button>
    </template>
    <ErpFinanceDepositBillPenetrate ref="depositBillPenetrate"></ErpFinanceDepositBillPenetrate>
    <ErpFinancePaymentBillPenetrate ref="paymentBillPenetrate"></ErpFinancePaymentBillPenetrate>
    <ErpFinanceLoanBillPenetrate ref="loanBillPenetrate"></ErpFinanceLoanBillPenetrate>
    <ErpFinancePaymentBillListPenetrate ref="paymentBillListPenetrate"></ErpFinancePaymentBillListPenetrate>
  </a-modal>
</template>

<script>

  import { filterObj } from '@/utils/util';
  import { getAction } from '@/api/manage'
  import moment from 'moment'
  import SelectCompanyInput from '@/views/scy/components/SelectCompanyInput'
  import SelectCustomerInput from '@/views/scy/components/SelectCustomerInput'
  import ErpFinancePaymentSlipForm from '@/views/erp/finance/payment/modules/ErpFinancePaymentSlipForm'
  import ErpFinanceReimbursementBillForm from '@/views/erp/finance/reimbursement/modules/ErpFinanceReimbursementBillForm'
  import ErpFinanceProjectProgressPaymentApplicationBillForm from '@/views/erp/finance/projectProgress/modules/ErpFinanceProjectProgressPaymentApplicationBillForm'
  import ErpFinanceTravelReimbursementBillForm from '@/views/erp/finance/travel/modules/ErpFinanceTravelReimbursementBillForm'
  import ErpFinanceDepositBillPenetrate from '@/views/scy/penetrate/ErpFinanceDepositBillPenetrate'
  import ErpFinancePaymentBillPenetrate from '@/views/scy/penetrate/ErpFinancePaymentBillPenetrate'
  import ErpFinanceLoanBillPenetrate from '@/views/scy/penetrate/ErpFinanceLoanBillPenetrate'
  import ErpFinancePaymentBillListPenetrate from '@/views/scy/penetrate/ErpFinancePaymentBillListPenetrate'
  import SelectProjectInput from '@/views/scy/components/SelectProjectInput'
  import { DragResizable } from '@/mixins/DragResizable'

  export default {
    name: 'ErpFinanceTravelReimbursementPenetrate',
    components: {
      SelectCompanyInput,
      SelectCustomerInput,
      SelectProjectInput,
      ErpFinanceTravelReimbursementBillForm,
      ErpFinanceReimbursementBillForm,
      ErpFinanceProjectProgressPaymentApplicationBillForm,
      ErpFinancePaymentSlipForm,
      ErpFinanceDepositBillPenetrate,
      ErpFinancePaymentBillPenetrate,
      ErpFinanceLoanBillPenetrate,
      ErpFinancePaymentBillListPenetrate
    },
    mixins: [DragResizable],
    props: [],
    data() {
      return {
        relBillId:"",
        visibleDetail: false,
        activeKey: '1',
        title: '报销冲账明细',
        queryParam: {},
        toggleSearchStatus: false,
        travelColumns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '单据编号',
            align: 'center',
            dataIndex: 'billNo',
            scopedSlots: { customRender: 'billNo' },
            ellipsis: true
          },
          {
            title: '申请部门',
            align: 'center',
            dataIndex: 'proposerDeptId_dictText',
            ellipsis: true
          },
          {
            title: '出差人员',
            align: 'center',
            dataIndex: 'employeeName',
            ellipsis: true
          },
          {
            title: '申请时间',
            align: 'center',
            dataIndex: 'createTime',
            ellipsis: true
          },
          {
            title: '出差事由',
            align: 'center',
            dataIndex: 'travelReasons',
            width: 250,
            ellipsis: true
          },
          {
            title: '报销总金额（元）',
            align: 'center',
            dataIndex: 'thisAmount',
            ellipsis: true
          },
          {
            title: '是否付款',
            align: 'center',
            dataIndex: 'isPay_dictText',
            ellipsis: true
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 100,
            scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action' }
          }
        ],
        url: {
          queryPaymentBillById: '/api/erp/finance/payment/erpFinancePaymentSlip/queryById',
          queryReimbursementBillById: '/api/erp/finance/reimbursement/erpFinanceReimbursementBill/queryById',
          queryProjectProgressBillById: '/api/erp/finance/projectProgress/erpFinanceProjectProgressPaymentApplicationBill/queryById',
          paymentUrlList: '/api/erp/finance/payment/erpFinancePaymentSlip/allList',
          projectProgressUrlList: '/api/erp/finance/projectProgress/erpFinanceProjectProgressPaymentApplicationBill/allList',
          travelUrlList: '/api/erp/finance/travel/erpFinanceTravelReimbursementBill/checkList',
          reimbursementUrlList: '/api/erp/finance/reimbursement/erpFinanceReimbursementBill/allList'
        },
        dataSource: [],
        loading: false,
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        isorter: {
          column: 'createTime',
          order: 'desc'
        },
        scrollTrigger: { x: 'true' },
        visible: false,
        dictOptions: {},
        createTime: [],
        contractId: null,
        visibleDetails: false,
        queryParams: {},
        loadings: false,
        toggleSearchStatuss: false,
        dragResizeColumns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '单据编号',
            align: 'center',
            dataIndex: 'billNo',
            scopedSlots: { customRender: 'billNo' },
            width: 242,
            ellipsis: true
          },
          {
            title: '申请公司',
            align: 'center',
            dataIndex: 'applicant_dictText',
            width: 242,
            ellipsis: true
          },
          {
            title: '报销金额（元）/已付金额（元）/冲账金额（元）',
            align: 'center',
            width: 350,
            dataIndex: 'reimbursementAmount',
            scopedSlots: { customRender: 'money' },
            ellipsis: true
          },
          {
            title: '本次付款金额（元）',
            align: 'center',
            dataIndex: 'payAmount',
            width: 242,
            ellipsis: true
          },
          {
            title: '是否付款',
            align: 'center',
            dataIndex: 'isPayFlag_dictText',
            width: 100,
            ellipsis: true
          },
          {
            title: '报销说明',
            align: 'center',
            dataIndex: 'applyExplain',
            width: 242,
            ellipsis: true
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 100,
            scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action' }
          }
        ],
        dataSources: [],
        ipaginations: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        isorters: {
          column: 'createTime',
          order: 'desc'
        },
        createTimeRange: [],
        dataSourcess: [],
        loadingss: false,
        ipaginationss: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        isorterss: {
          column: 'createTime',
          order: 'desc'
        },
        visibleDetailss: false,
        queryParamss: {},
        loadingss: false,
        toggleSearchStatusss: false,
        paymentColumns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '单据编号',
            align: 'center',
            dataIndex: 'billNo',
            scopedSlots: { customRender: 'billNo' },
            ellipsis: true
          },
          {
            title: '申请公司',
            align: 'center',
            dataIndex: 'applicant_dictText',
            ellipsis: true
          },
          {
            title: '申请团队',
            align: 'center',
            dataIndex: 'teamId_dictText',
            ellipsis: true
          },
          {
            title: '支付金额',
            align: 'center',
            dataIndex: 'payAmount',
            ellipsis: true
          },
          {
            title: '收款人',
            align: 'center',
            dataIndex: 'payeeName_dictText',
            ellipsis: true
          },
          {
            title: '收款方式',
            align: 'center',
            dataIndex: 'payMode_dictText',
            ellipsis: true
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 160,
            scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action' }
          }
        ],
        dataSourcesss: [],
        loadingsss: false,
        ipaginationsss: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        isortersss: {
          column: 'createTime',
          order: 'desc'
        },
        visibleDetailsss: false,
        queryParamsss: {},
        loadingsss: false,
        toggleSearchStatussss: false,
        projectProcessColumns: [
        {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '单据编号',
            align: 'center',
            dataIndex: 'billNo',
            scopedSlots: { customRender: 'billNo' },
            ellipsis: true
          },
          {
            title: '申请人',
            align: 'center',
            dataIndex: 'proposer_dictText',
            ellipsis: true
          },
          {
            title: '关联项目',
            align: 'center',
            dataIndex: 'projectId_dictText',
            ellipsis: true
          },
          {
            title: '项目归属年度',
            align: 'center',
            dataIndex: 'projectYear_dictText',
            width: 150,
            ellipsis: true
          },
          {
            title: '项目业务团队',
            align: 'center',
            dataIndex: 'projectBusiTeamId_dictText',
            width: 150,
            ellipsis: true
          },
          {
            title: '本项目累计支付金额',
            align: 'center',
            dataIndex: 'projectPaidTotalAmount',
            width: 180,
            ellipsis: true
          },
          {
            title: '本项目累计支付比例%',
            align: 'center',
            dataIndex: 'projectPaidRate',
            width: 180,
            ellipsis: true
          },
          {
            title: '是否付款',
            align: 'center',
            dataIndex: 'isPay_dictText',
            ellipsis: true
          },
          {
            title: '付款时间',
            align: 'center',
            dataIndex: 'payTime',
            ellipsis: true
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 160,
            scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action' }
          }
        ]
      }
    },
    created() {
      // this.loadData();
      // 该方法触发屏幕自适应
      this.resetScreenSize();
      this.refresh();
      // 加载数据字典信息
      this.initDictConfig();
      this.dragResizeColumnswidth = this.dragResizeColumns.map(val => {
        return val.width
      })
    },
    computed: {
    },
    methods: {
       // 打开付款弹窗
       getPaymentAmount(record) {
        // 先清空数据
        this.$refs.paymentBillListPenetrate.dataSource = []
        this.$refs.paymentBillListPenetrate.ipagination.total = 0
        // 查询数据
        this.$refs.paymentBillListPenetrate.loading = true
        this.$refs.paymentBillListPenetrate.relReimbursementBillId = record.id
        this.$refs.paymentBillListPenetrate.searchReset()
         // 打开弹窗
         this.$refs.paymentBillListPenetrate.visible = true
      },
      // 打开冲账弹窗
      getChargedAmount(record) {
        if (record.relBillType == '1') {
          this.$refs.loanBillPenetrate.initData(record.relBillId);
          this.$refs.loanBillPenetrate.visible = true;
        } else if (record.relBillType == '2') {
          this.$refs.paymentBillPenetrate.initData(record.relBillId);
          this.$refs.paymentBillPenetrate.visible = true;
        } else if (record.relBillType == '3') {
          this.$refs.depositBillPenetrate.initData(record.relBillId);
          this.$refs.depositBillPenetrate.visible = true;
        }
      },
      initDictConfig() {
      },
      callback(key) {
        if (key == 1) {
          // 先清空数据
          this.dataSources = []
          this.ipaginations.total = 0
          // 查询数据
          this.loadings = true
          this.searchResets()
        } else if (key == 2) {
          // 先清空数据
          this.dataSourcesss = []
          this.ipaginationsss.total = 0
          // 查询数据
          this.loadingsss = true
          this.searchResetsss()
        }
      },
      // 触发屏幕自适应
      resetScreenSize() {
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 500) {
          this.scrollTrigger = { x: 800 };
        } else {
          this.scrollTrigger = {};
        }
      },
      handleCancel() {
        this.visible = false;
      },
      // 费用报销
      onDetails(record) {
        this.visible = false
        this.visibleDetails = true
        // 查询费用报销单信息
        getAction(this.url.queryReimbursementBillById, { id: record.id }).then((res) => {
        if (res.success) {
            let data = res.result;
            this.$nextTick(() => {
              this.$refs.realForms.edit(data);
            });
          }
        })
      },
      handleCancelDetails() {
        this.visible = true
        this.visibleDetails = false
      },
      handleToggleSearchs() {
        this.toggleSearchStatuss = !this.toggleSearchStatuss;
      },
      handleTableChanges(paginations, filters, sorter) {
        // TODO 筛选
        if (Object.keys(sorter).length > 0) {
          this.isorters.column = sorter.field;
          this.isorters.order = sorter.order == 'ascend' ? 'asc' : 'desc'
        }
        this.ipaginations = paginations;
        this.loadDatas();
      },
      loadDatas(arg) {
        // 加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipaginations.current = 1;
        }
        var params = this.getQueryParamss();// 查询条件
        if (!this.relBillId) {
          this.dataSources = []
          this.ipaginations.total = 0
          return
        } else {
          params.relBillIds = this.relBillId;
        }
        params.bpmStatus = '3';
        getAction(this.url.reimbursementUrlList, params).then((res) => {
          if (res.success) {
            this.dataSources = res.result.records;
            this.ipaginations.total = res.result.total;
            // 判断是否当前页没有数据且不为第一页
            if (this.dataSources.length == 0 && this.ipaginations.current != 1) {
              this.ipaginations.current = this.ipaginations.current - 1
              this.loadDatas(this.ipaginations.current - 1);
            } else {
              this.loadings = false
            }
          }
        })
      },
      getQueryParamss() {
        let param = Object.assign({}, this.queryParams, this.isorters);
        param.field = this.getQueryFields();
        param.pageNo = this.ipaginations.current;
        param.pageSize = this.ipaginations.pageSize;
        return filterObj(param);
      },
      getQueryFields() {
        let str = 'id,';
        for (let a = 0; a < this.dragResizeColumns.length; a++) {
          str += ',' + this.dragResizeColumns[a].dataIndex;
        }
        return str;
      },
      searchResets() {
        let that = this;
        Object.keys(that.queryParams).forEach(function (key) {
          that.queryParams[key] = null;
        });
        that.loadDatas(1);
      },
      searchByquerys() {
        this.loadDatas(1);
      },
      //* ********************************************** */
      //* ********************************************* */
      refresh() {
        this.loading = true
      }
    }
  }
</script>
<style scoped>
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .anty-img-wrap {
    height: 25px;
    position: relative;
  }

  .anty-img-wrap > img {
    max-height: 100%;
  }

</style>
